{extends file="skulton.tpl"}{/extends}
{block name="monblock"}
                          <!--Script Réalisé par Ditini Anass et Ezzamane Soukaina -->
<script src="scripts/js/Form.js"></script>
<script>
$(function() {
    
    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 400,
      width: 500,
      modal: true,
      buttons: {
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });
  });
</script>
<script type="text/javascript" charset="utf-8">
  var asInitVals = new Array();
  var td, td_html, a;
  $(document).ready(function() {
      function change_state(state, id){//fct prend le state 1 ou 2 id:c'est id du matérielqu'on va changer son statut
        $.ajax({
          url : 'materielcommande.php?action=change',
          type : 'post',
          data : 'state='+state+"&id_change="+id, //les données à envoyer dans le post
          success : function(theResponse){//fct qui s'execute lorsque la requête passe bien
            if(state==1)
              loading(td, 'accepted.png');
            else
              loading(td, 'refused.png');
            console.log(theResponse);
          },
          error : function(){//cas problème du serveur
            td.html(td_html);
            alert("Connection error");
          }
        });
      }
      function loading(obj, string){// pour écraser
        console.log('<img src="images/'+string+'">');
        obj.html('<img src="images/'+string+'">');
      }
      $(".confirm_dialogue").live("click", function(){ // 1 est accépté , 2 est non accépté
        a = $(this);//le lien qu'on a cliqué dessus
        td = $(this).parent();
        td_html = td.html();
        loading(td, 'loader.gif');
        var data = a.attr('data-request');
        if(data=="accept") text = "accepter";
        else text = "refuser"
        $( "#dialog-confirm" ).html('<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Voulez-vous vraiment '+text+' cet enregistrement ?</p>');
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            modal: true,
            buttons: {
              "Oui": function() {
                if(data=="accept"){
                  change_state(1, a.attr('id'));
                  //loading(td, 'accepted.png');
                }
                else if(data=="refuse"){
                  change_state(2, a.attr('id'));
                  //loading(td, 'refused.png');
                }
                $( this ).dialog( "close" );
                //document.location.href="materielcommande.php?id_sup="+a.attr('id');
              },
              "Non": function() {
                td.html(td_html);
                $( this ).dialog( "close" );
              }
            }
        });
      });

                   //affichage dialog de confirmation xsl*/

 $(".rep").click(function(){
        var a = $(this);
        $( "#dialog-confirmXSL" ).dialog({
            resizable: false,
            modal: true,
            buttons: {
              "Générer": function() {
                
                document.location.href="genererXSL.php?&page=materielCommande";
              },
              "non": function() {
                $( this ).dialog( "close" );
              }
            }
        });
      });
    var oTable = $('#idtable').dataTable( {
      "sPaginationType": "full_numbers",
      "oLanguage": {
        "sSearch": "Rechercher:"
      }
    } );

    //recherche spécifique à la colone

    $("tfoot input").keyup( function () {
      oTable.fnFilter( this.value, $("tfoot input").index(this) );
    } );
     
    $("tfoot input").each( function (i) {
      asInitVals[i] = this.value;
    } );
     
    $("tfoot input").focus( function () {
      if ( this.className == "search_init" )
      {
        this.className = "";
        this.value = "";
      }
    } );
     
    $("tfoot input").blur( function (i) {
      if ( this.value == "" )
      {
        this.className = "search_init";
        this.value = asInitVals[$("tfoot input").index(this)];
      }
    } );

      
      // FORMULAIRE UI

  } );
</script>
    
<div class="content-box"><!-- Start Content Box -->
  
  <div class="content-box-header">
    
    <h3>Liste des matériels commandés</h3>

    <!--Script Réalisé par Khalid Mezouri -->
    <a href="generePDF.php?&page=materielCommande"  style='margin-left:10px;'><img src="images/icons/PDF.png" ></a>
    <a href="#" class="rep" style='margin-left:10px;'><img src="images/icons/excel.png" ></a>
    <!--Fin Script Réalisé par Khalid Mezouri -->
  </div> <!-- End .content-box-:>header -->
  <div class="content-box-content">  
      </div> <!-- End #messages -->
    <div class="tab-content default-tab" id="tab1"> <!-- This is the target div. id must match the href of this div's tab -->
    {if isset($message)}
      <div class="notification success png_bg">
        <a href="#" class="close"><img src="images/i/cross_grey_small.png" title="Close this notification" alt="close"></a>
        <div>
          {$message}
        </div>
      </div>
    {/if} 
      
  <div style="display:none;" id="dialog-confirm" title="Demande de confirmation"></div>
 <!--confirmer la generation XSL avec un dialog-->
  <div style="display:none;" id="dialog-confirmXSL" title="Demande de confirmation">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Voulez-vous vraiment générer ce fichier dans le bureau ?</p>
  </div>
      <table id="idtable">
        
        <thead>
          <tr>
             <th><input class="check-all" type="checkbox" /></th>
             <th>id</th>
             <th>Réference</th>
             <th>Constructeur</th>
             <th>Connecteur</th>
             <th>Type</th>
             <th>Etat</th>
             <th>Quantité</th>
             <th>Date de Commande</th>
             <th>Nomade</th>
             <th>Tâche</th>
             <th>Opération</th>
          </tr>
        </thead>
      
        <tbody>
          {foreach $listmaterielcommande as $line}
          <tr>
            <td><input type="checkbox" /></td>
            <td>{$line->getId()}</td>
            <td>{$line->getReference()}</td>
            <td>{$line->getConstructeur()}</td>
            <td>{$line->getConnecteur()}</td>
            <td>{$line->getType()} </td>
            <td>
            {if $line->getEtat()==0}
            <img src="images/unseen.png" alt="vu">
            {else}
            <img src="images/seen.png" alt="vu">
            {/if}
            </td>
            <td>{$line->getQuantite()}</td>
            <td>{$line->getDateCommande()}</td>
            <td>{$nomadeDao->loadNomade($line->getIdNomade())->getNom()} {$nomadeDao->loadNomade($line->getIdNomade())->getPrenom()}</td>
            <td>{$line->getIdTache()} </td>
            <td>
              {if $line->getEtat()==1}
                <img src="images/accepted.png">
              {elseif $line->getEtat()==2}
                <img src="images/refused.png">
              {else}
                <a href="#" title="accepter" data-request="accept" class="confirm_dialogue with-tip accept" id="{$line->getId()}"><img src="images/icons/list-accept.png" alt="accepter" /></a>
                <a href="#" title="refuser" data-request="refuse" class="confirm_dialogue with-tip refus" id="{$line->getId()}"><img src="images/icons/list-delete.png" alt="refuser" /></a>
              {/if}
            </td>
          </tr>
          {/foreach}          
        </tbody>
        <tfoot>

                                                   <!--Recherches-->
          <tr>
            <th><input type="text" name="search_id" value="" class="search_int" style="display:none" /></th>
            <th><input type="text" name="search_id" value="" class="search_int" style="display:none" /></th>
            <th><input type="text" name="search_reference" value="" class="search_int" /></th>
            <th><input type="text" name="search_constructeur" value="" class="search_int" /></th>
            <th><input type="text" name="search_connecteur" value="" class="search_int"  /></th>
            <th><input type="text" name="search_type" value="" class="search_int" style="display:none" /></th>
            <th><input type="text" name="search_etat" value="" class="search_int"  /></th>
            <th><input type="text" name="search_quantite" value="" class="search_int"  /></th>
            <th><input type="text" name="search_dateCommande" value="" class="search_int"  /></th>
            <th><input type="text" name="search_idNomade" value="" class="search_int"  /></th>
            <th><input type="text" name="search_idTache" value="" class="search_int"  /></th>
            <th><input type="text" name="search_operations" value="" class="search_int" style="display:none"/></th>            
          </tr>
        </tfoot>
        
      </table> 
    </div> <!-- End #tab2 -->        
  </div> <!-- End .content-box-content -->
  {/block}